<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<ng-form name="vm.slaForm" ng-if="vm.editSla != null" class="layout-padding-left-right layout-padding-top">
  <div layout="row" layout-align="space-between start">
  <md-button ng-click="vm.onBackToList($event)">返回目录</md-button>
  <a href ng-click="vm.viewSlaAssessments()" ng-if="vm.feed">Sla评估</a>
  </div>

  <div layout="column" class="layout-padding-top" style="padding-top:16px;">
    <md-input-container class="md-block condensed">
      <label>名称</label>
      <input name="slaName" type="text" ng-model="vm.editSla.name" md-placeholder="SLA name" ng-disabled="!vm.allowEdit"
             required/>

      <div ng-messages="vm.slaForm.slaName.$error " md-auto-hide="false">
        <div ng-message="required">这是必填栏。</div>
      </div>
    </md-input-container>
    <md-input-container class="md-block condensed">
      <label>描述</label>
      <input name="slaDescription" type="text" ng-model="vm.editSla.description" md-placeholder="SLA Description" ng-disabled="!vm.allowEdit"
             required/>

      <div ng-messages="vm.slaForm.slaDescription.$error " md-auto-hide="false">
        <div ng-message="required">这是必填栏。</div>
      </div>
    </md-input-container>
  </div>


  <div>
    <span class="md-body-2">SLA条件</span>

    <div ng-repeat="rule in vm.editSla.rules" layout="column" class="layout-padding-left-right">
      <div layout="row">
        <div class="layout-padding-right md-body-2">{{($index+1)}}.</div>
        <md-input-container class="md-block layout-padding-left" ng-if="!$first" md-no-float>
          <md-select ng-model="rule.condition" aria-label="Condition" ng-disabled="!rule.editable" placeholder="条件">
            <md-option value="REQUIRED">添加</md-option>
            <md-option value="SUFFICIENT">或者</md-option>
          </md-select>
        </md-input-container>

        <div layout="column" flex class="layout-padding-left md-body-2">
          <span>{{rule.name}}</span>
          <span class="hint">{{rule.description}}</span>
        </div>
        <div>
          <div>
            <md-button class="icon-btn md-icon-button auto-height" ng-click="vm.onDeleteSlaMetric($index)" ng-if="rule.editable">
              <ng-md-icon icon="delete" size="20" style="fill:grey;"></ng-md-icon>
            </md-button>
          </div>
        </div>
      </div>
      <thinkbig-policy-input-form class="layout-padding-top" the-form="vm.slaForm" rule="rule" mode="vm.mode" feed="vm.feed"></thinkbig-policy-input-form>

      <md-divider ng-if="!$last"></md-divider>
      <div ng-if="vm.addingSlaCondition == false && $last" layout="row">
        <md-button class="md-primary" ng-click="vm.addNewCondition()">添加 条件</md-button>
        <span flex></span>
      </div>

    </div>

    <div ng-if="vm.addingSlaCondition" class="layout-padding-left-right" layout="row" flex>


      <md-input-container class="md-block layout-padding-top-bottom" ng-if="vm.editSla != null && vm.editSla.rules.length >0" md-no-float>
        <label class="md-container-ignore label-small layout-padding-top">条件</label>
        <md-select ng-model="vm.ruleTypeCondition" aria-label="Condition">
          <md-option value="REQUIRED">添加</md-option>
          <md-option value="SUFFICIENT">或</md-option>
        </md-select>
      </md-input-container>
      <md-input-container class="md-block layout-padding-top-bottom">
        <label class="md-container-ignore label-small layout-padding-top">选择新条件</label>
        <md-select ng-model="vm.ruleType" ng-model-options="{trackBy: '$value.name'}" ng-change="vm.onAddConditionRuleTypeChange()" aria-label="Rule Type">
          <md-option ng-value="opt" ng-repeat="opt in vm.options">{{ opt.name }}</md-option>
        </md-select>
      </md-input-container>
      <span flex></span>
      <md-button class="icon-btn md-icon-button auto-height" ng-click="vm.addingSlaCondition = false" ng-if="vm.editSla != null && vm.editSla.rules.length >0">
        <ng-md-icon icon="delete" size="20" style="fill:grey;"></ng-md-icon>
      </md-button>
    </div>

    <div>
      <span class="md-body-2">SLA行为</span>

      <div ng-if="vm.editSla.actionConfigurations.length ==0" layout="column" class="layout-padding-left">
        <span>所有SLA违规都会产生警报。.</span>
        <span ng-if="vm.showActionOptions">单击“添加操作”按钮以在违反SLA时添加其他操作</span>
      </div>
      <div ng-if="vm.editSla.actionErrors != null && vm.editSla.actionErrors.length >0" layout="column" class="layout-padding-left-right">
        <div class="error md-title bold layout-padding-left" layout="row">
          <div class="layout-padding-left">
            <ng-md-icon icon="warning" size="20" class="error">警告</ng-md-icon>
          </div>
          <span>发现错误 保存此SLA将导致配置数据丢失。</span>
        </div>

        <div ng-repeat="error in vm.editSla.actionErrors" layout="column" class="layout-padding-left">
          <span class="error">{{error}}</span>
        </div>
      </div>
      <div ng-repeat="rule in vm.editSla.actionConfigurations" layout="column" class="layout-padding-left-right">

        <div layout="row" class="">
          <div class="layout-padding-right md-body-2">{{($index+1)}}.</div>

          <div layout="column" flex class="layout-padding-left md-body-2">
            <span>{{rule.name}}</span>
            <span class="hint">{{rule.description}}</span>
            <span ng-if="rule.validConfiguration == false" class="error"><strong>警告</strong> 配置错误！ 您仍然可以分配此操作，但由于配置问题，它可能不会触发。{{rule.validationMessage}}</span>
          </div>
          <div>
            <div>
              <md-button class="icon-btn md-icon-button auto-height" ng-click="vm.onDeleteSlaAction($index)" ng-if="rule.editable">
                <ng-md-icon icon="delete" size="20" style="fill:grey;"></ng-md-icon>
              </md-button>
            </div>
          </div>
        </div>


        <thinkbig-policy-input-form the-form="vm.slaForm" rule="rule" allow-edit="vm.allowEdit"></thinkbig-policy-input-form>
        <md-divider ng-if="!$last"></md-divider>
      </div>
      <div ng-if="vm.addingSlaAction" class="layout-padding-left-right" layout="row">
        <md-input-container class="md-block layout-padding-top-bottom">
          <label class="md-container-ignore label-small layout-padding-top">选择新建操作</label>
          <md-select ng-model="vm.slaAction" ng-model-options="{trackBy: '$value.name'}" ng-change="vm.onAddSlaActionChange()" aria-label="Rule Type">
            <md-option ng-value="opt" ng-repeat="opt in vm.slaActionOptions">{{ opt.name }}</md-option>
          </md-select>
        </md-input-container>
        <md-button class="icon-btn md-icon-button auto-height" ng-click="vm.addingSlaAction = false">
          <ng-md-icon icon="delete" size="20" style="fill:grey;"></ng-md-icon>
        </md-button>
      </div>
      <div ng-if="vm.addingSlaAction == false" flex layout="row">
        <md-button class="md-primary" ng-click="vm.addingSlaAction = true" ng-if="vm.showActionOptions" ng-disabled="vm.editSla.rules.length ==0">添加操作</md-button>
        <span flex></span>
      </div>
    </div>


    <div class="layout-padding-top-bottom" flex layout="row">
      <md-button ng-click="vm.onDeleteSla($event)" ng-if="vm.editSla != null && vm.editSlaIndex != null && vm.allowEdit">删除</md-button>
      <span flex></span>
      <md-button  ng-click="vm.cancelEditSla()" ng-if="vm.editSla != null">取消</md-button>
      <md-button class="md-primary md-raised" ng-click="vm.saveSla()" ng-if="vm.editSla != null && vm.allowEdit" ng-disabled="vm.editSla.rules.length ==0 || vm.slaForm.$invalid">保存 SLA</md-button>
    </div>

  </div>

</ng-form>
